<template>
  <div>
    <div v-if="showType == 'table'">
      <el-card>
        <el-row :gutter="4">
          <el-form
            :inline="true"
            label-position="left"
            class="demo-form-inline"
            label-width="100px"
          >
            <el-form-item>
              <el-input
                v-model="searchDto.name"
                placeholder="请输入问卷调查名称"
                style="width:250px"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button icon="el-icon-search" type="primary" @click="search">
                查询
              </el-button>
            </el-form-item>
            <el-form-item>
              <el-button icon="el-icon-refresh" type="primary" @click="clear">
                重置
              </el-button>
            </el-form-item>
            <el-form-item class="clear_item-margin-bottom">
              <el-button type="primary" icon="el-icon-plus" @click="add"
                >新建问卷调查
              </el-button>
            </el-form-item>
          </el-form>
        </el-row>
        <page-table
          ref="multipleSelection"
          :page-data="pageData"
          :loading="loading"
          :do-get-page-data="getPageData"
        >
          <el-table-column
            label="编号"
            align="center"
            type="index"
            width="100px"
          ></el-table-column>
          <el-table-column
            prop="name"
            label="问卷调查名称"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="beginTime"
            label="开始时间"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="endTime"
            label="结束时间"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="createUserInfo.name"
            label="创建人"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column label="状态" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <span :style="{ color: setColor(scope.row.publishStatus) }">
                {{ scope.row.publishStatus | keyText("QUESTION_STATUS") }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            label="管理"
            width="280"
            align="center"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-tooltip
                content="编辑"
                placement="top"
                v-if="scope.row.publishStatus !== 'FINISH'"
              >
                <el-button
                  type="button"
                  size="mini"
                  icon="el-icon-edit"
                  @click="edit(scope.row)"
                >
                </el-button>
              </el-tooltip>
              <el-tooltip content="详情" placement="top">
                <el-button
                  type="button"
                  size="mini"
                  icon="el-icon-search"
                  @click="view(scope.row)"
                >
                </el-button>
              </el-tooltip>
              <el-tooltip
                content="完结"
                placement="top"
                v-if="scope.row.publishStatus === 'PUBLISH'"
              >
                <el-button
                  type="button"
                  size="mini"
                  icon="el-icon-check"
                  @click="over(scope.row)"
                >
                </el-button>
              </el-tooltip>
              <el-tooltip
                content="删除"
                placement="top"
                v-if="scope.row.publishStatus !== 'PUBLISH'"
              >
                <el-button
                  size="mini"
                  icon="el-icon-delete"
                  @click="del(scope.row)"
                >
                </el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </page-table>
      </el-card>
    </div>
    <!-- 添加&编辑页 -->
    <questionnaireDetail
      v-if="showType == 'edit'"
      ref="questionnaireDetail"
      :questionData="questionData"
      @back="showType = 'table'"
      @getData="getPageData"
    ></questionnaireDetail>
    <!-- 详情页 -->
    <questionnaireInfo
      v-if="showType == 'info'"
      :questionInfo="questionInfo"
      @back="showType = 'table'"
    >
    </questionnaireInfo>
  </div>
</template>
<script>
import questionnaireDetail from "./questionnaireDetail";
import questionnaireInfo from "./questionnaireInfo";
export default {
  name: "questionnaire",
  components: {
    questionnaireDetail,
    questionnaireInfo
  },
  created() {
    this.getPageData();
  },
  data() {
    return {
      pageData: {},
      showType: "table",
      loading: false,
      searchDto: {
        name: ""
      },
      questionData: {},
      questionInfo: {}
    };
  },
  methods: {
    // 获取分页数据
    getPageData(val) {
      let tem = Object.assign(this.searchDto, val);
      this.API.getQuestionnairePageList(tem).then(ret => {
        this.pageData = ret.data;
      });
    },
    // 设置状态颜色
    setColor(val) {
      let color = "";
      switch (val) {
        case "PUBLISH":
          color = "#67C23A";
          break;
        case "SAVE":
          color = "#409EFF";
          break;
        case "FINISH":
          color = "#F56C6C";
          break;
        default:
          color = "#606266";
          break;
      }
      return color;
    },
    // 查询
    search() {
      this.getPageData();
    },
    // 清空
    clear() {
      this.searchDto.name = "";
      this.getPageData();
    },
    // 新增
    add() {
      this.questionData = {};
      this.showType = "edit";
    },
    // 编辑
    edit({ id }) {
      this.API.getQuestionnaireById({ id }).then(ret => {
        this.questionData = ret.data;
        this.showType = "edit";
      });
    },
    // 详情
    view({ id }) {
      this.API.getQuestionnaireById({ id }).then(ret => {
        this.questionInfo = ret.data;
        this.showType = "info";
      });
    },
    // 完结
    over({ id }) {
      this.$confirm("确认完结?", "提示", {
        type: "warning"
      }).then(() => {
        let status = "FINISH";
        this.API.updatePublishById({ id, status }).then(ret => {
          this.success("操作成功!");
          this.getPageData()
        });
      });
    },
    // 删除
    del({ id }) {
      this.$confirm("确认删除?", "提示", {
        type: "warning"
      }).then(() => {
        this.API.deleteQuestionnaireById({ id }).then(ret => {
          this.success("删除成功!");
          this.getPageData();
        });
      });
    }
  }
};
</script>
<style scoped></style>
